<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box{
        width: 900px;
        height: 500px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    ul{
        position: absolute;
        display: flex;
        left: -900px;
        transition: all 0.5s linear;

    }
    li{        
        width: 900px;
        height: 500px;
    }
    img{
        
        width: 900px;
        height: 500px;
    }
    .left{
        position: absolute;
        top: 200px;
        left: 0;
        width: 50px;
        height: 80px;
        background-color: pink;
    }
    .right{
        position: absolute;
        top: 200px;
        right: 0;
        width: 50px;
        height: 80px;
        background-color: pink;

    }
    </style>
</head>
<body>
    <!-- <img src="https://www.jq22.com/demo/jquerylbt202112220954/images/t3.png" alt=""> -->
    <div class="box">
        <ul></ul>
        <div class="left">
           
        </div>
        <div class="right">
           
        </div>
    </div>
    <!-- 1.获取所有标签
         2.渲染轮播图图片
         3.设置图片的索引号
         4.设置右边，左边点击事件
     -->
    <script>
        // 获取所有标签
        var box = document.querySelector('.box');
        var ul = document.querySelector('ul');
        var left = document.querySelector('.left');
        var right = document.querySelector('.right');
        // 渲染轮播图图片
        // 第一位上渲染第三张图片
        ul.innerHTML += `<li><img src="https://www.jq22.com/demo/jquerylbt202112220954/images/t3.png" alt=""></li>`;
        // 中三位上循环渲染出三张图片
        for (let i = 0; i < 3; i++) {
        ul.innerHTML += `<li><img src="https://www.jq22.com/demo/jquerylbt202112220954/images/t${i + 1}.png" alt=""></li>`;
        }
        // 第五位上渲染第一张图片
        ul.innerHTML += `<li><img src="https://www.jq22.com/demo/jquerylbt202112220954/images/t1.png" alt=""></li>`;
        // 设置图片的索引号
        var index = 1;
        // 设置右边点击事件
        right.addEventListener('click',function () {
            ul.style.transition = 'all 0.5s linear';
            index++;
            ul.style.left = -900*index + "px";
            if(index==4) {
                setTimeout(function () {
                    ul.style.transition = 'none';
                    ul.style.left = '-900px';
                    
                } ,500)
                index = 1;
            }          
        })
        // 设置左边点击事件
        left.addEventListener('click',function () {
            ul.style.transition = 'all 0.5s linear';
            index--;
            ul.style.left = -900*index + "px";
            if(index<1) {
                setTimeout(function () {
                    ul.style.transition = 'none';
                    ul.style.left = '-2700px';
                    
                } ,500)
                // ul.style.left = '-900px';
                index = 3;
            }
        })
        // 添加定时器
        var time = setInterval(function () {
            ul.style.transition = 'all 0.5s linear';
            index++;
            ul.style.left = -900*index + "px";
            if(index==4) {
                setTimeout(function () {
                    ul.style.transition = 'none';
                    ul.style.left = '-900px';
                    
                } ,500)
                index = 1;
            }          
        },2000)
        // 清除定时器
        box.addEventListener('mouseover',function () {
            clearInterval(time);
        })
        // 重新添加定时器
        box.addEventListener('mouseleave',function (){
            time = setInterval(function () {
            ul.style.transition = 'all 0.5s linear';
            index++;
            ul.style.left = -900*index + "px";
            if(index==4) {
                setTimeout(function () {
                    ul.style.transition = 'none';
                    ul.style.left = '-900px';
                    
                } ,500)
                index = 1;
            }          
        },2000)
        })
    </script>

</body>
</html>